<template>
  <view class="clock-wrapper">
    <view style="flex: 1">
      <punch-tab v-if="current_tab === 'punch'" />
      <stat-tab v-else />
    </view>
    <view class="tab-placeholder" />
    <view class="tab-wrapper flex">
      <view class="tab" @tap="setCurrentTab('punch')">
        <u-icon v-if="current_tab === 'punch'" name="map-fill" class="fs18 tc-theme" />
        <u-icon v-else name="map" class="fs18" style="color: #c0c0c0" />
        <text :class="{'tab-text': true, active: current_tab === 'punch'}">打卡</text>
      </view>
      <view class="tab" @tap="setCurrentTab('stat')">
        <u-icon v-if="current_tab === 'stat'" name="calendar-fill" class="fs18 tc-theme" />
        <u-icon v-else name="calendar" class="fs18" style="color: #c0c0c0" />
        <text :class="{'tab-text': true, active: current_tab === 'stat'}">统计</text>
      </view>
    </view>
  </view>
</template>
<script>
import PunchTab from './punchTab'
import StatTab from './statTab'
import { mapState } from 'vuex';
export default {
  components: {
    PunchTab,
    StatTab
  },
  data() {
    return {
      current_tab: 'punch'
    }
  },
  computed: {
    ...mapState(['settings'])
  },
  created() {
    this.setCurrentTab('punch')
  },
  methods: {
    setCurrentTab(tab){
      this.current_tab = tab
      if(tab === 'punch'){
        uni.setNavigationBarTitle({
          title: '打卡'
        })
        uni.setNavigationBarColor({
          frontColor: '#ffffff',
          backgroundColor: this.settings.theme
        })
      }else{
        uni.setNavigationBarTitle({
          title: '统计'
        })
        uni.setNavigationBarColor({
          frontColor: '#000000',
          backgroundColor: '#ffffff'
        })
      }
    }
  }
}
</script>
